<script setup lang="ts">
withDefaults(
  defineProps<{
    title?: string
    right?: string
    height?: string
    loading?: boolean
  }>(),
  {}
)
</script>

<template>
  <a-spin :spinning="loading">
    <div class="segment" :style="{ height }">
      <!-- <div class="rect1" />
      <div class="rect2" /> -->
      <SvgIcon name="segment-light" class="light-tag" :size="[378, 28]" />
      <div class="bottom-light-line-left" />
      <div class="bottom-light-line-right" />
      <SvgIcon name="segment-bottom-left-tag" class="left-tag" :size="18" />
      <SvgIcon name="segment-bottom-right-tag" class="right-tag" :size="18" />
      <header>
        <div class="title">
          <slot name="title">
            {{ title }}
          </slot>
        </div>
        <div class="right">
          <slot name="right">
            {{ right }}
          </slot>
        </div>
      </header>
      <slot></slot>
    </div>
  </a-spin>
</template>

<style lang="less" scoped>
.segment {
  position: relative;
  min-height: 1px;
  // height: 100%;
  border-radius: 8px;
  border: 1px solid #2f6ac2;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    .title {
      color: var(--unnamed, #fff);
      text-align: center;
      font-family: Alibaba PuHuiTi 2;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 16px; /* 100% */
      padding: 8px 4px 8px 14px;
      background: linear-gradient(270deg, #2c74ff 0%, rgba(0, 56, 255, 0.46) 100%);
      position: relative;
      &::after {
        content: '';
        position: absolute;
        width: 58px;
        height: 100%;
        top: 0;
        left: calc(100% - 8px);
        background: url('@/assets/icons/segment-title-right-tag.svg') no-repeat left;
        background-size: contain;
      }
    }
    .right {
      padding-right: 16px;
      color: #4a6d93;
      text-align: right;
      font-family: Alibaba PuHuiTi 2;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px; /* 133.333% */
    }
  }
  .light-tag {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
  }
  .bottom-light-line-left {
    position: absolute;
    z-index: 9;
    bottom: -1px;
    right: 50%;
    width: 12.5%;
    height: 2px;
    background: linear-gradient(to left, rgba(99, 191, 242, 1) 0%, rgba(99, 191, 242, 0.1) 100%);
  }
  .bottom-light-line-right {
    position: absolute;
    z-index: 9;
    bottom: -1px;
    left: 50%;
    width: 12.5%;
    height: 2px;
    background: linear-gradient(to right, rgba(99, 191, 242, 1) 0%, rgba(99, 191, 242, 0.1) 100%);
  }
  .left-tag {
    position: absolute;
    left: -2px;
    bottom: -2px;
  }
  .right-tag {
    position: absolute;
    right: -2px;
    bottom: -2px;
  }
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(13, 30, 85, 0.17);
    box-shadow: 0px 0px 18px 0px rgba(32, 121, 255, 0.32) inset;
  }
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(8, 16, 93, 0.1);
    box-shadow: 0px 0px 22px 0px rgba(0, 71, 255, 0.22) inset;
  }
}
</style>
